<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点</title>
<script type="text/javascript">
/*节点类型： 
 * Document:最顶层的节点,所有的节点都附属于它;
 * 
 * */
    //alert(document.nodeType); //9

/*Node对象：*/   
window.onload = function(){
    var p1 = document.getElementById('p1');
    var arr  = [];
    for(var i in Node){
        arr.push(i+":"+ Node[i] +"<br />");
    }
    p1.innerHTML = arr.join();
};

/*对象检测：
 * alert(typeof Node); //IE6 undefined , IE9 object , FF function
 * 因为在IE6中Node对象未被定义,So自己检测并定义Node对象：
 * */
    if(typeof Node == 'undefined'){
        window.Node = {
            ELEMENT_NODE:1
            ,ATTRIBUTE_NODE:2
            ,TEXT_NODE:3
            ,CDATA_SECTION_NODE:4
            ,ENTITY_REFERENCE_NODE:5
            ,ENTITY_NODE:6
            ,PROCESSING_INSTRUCTION_NODE:7
            ,COMMENT_NODE:8
            ,DOCUMENT_NODE:9
            ,DOCUMENT_TYPE_NODE:10
            ,DOCUMENT_FRAGMENT_NODE:11
            ,NOTATION_NODE:12
            ,DOCUMENT_POSITION_DISCONNECTED:1
            ,DOCUMENT_POSITION_PRECEDING:2
            ,DOCUMENT_POSITION_FOLLOWING:4
            ,DOCUMENT_POSITION_CONTAINS:8
            ,DOCUMENT_POSITION_CONTAINED_BY:16
            ,DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC:32
        };
    }

/*节点类型其他方法： 
 * ownerDocument: 指向这个节点所属的文档
 * hasChildNodes: 当childNodes包含一个或多个节点时，返回true
 * attributes: 属性节点列表;仅用于元素节点
 * appendChild(node): 向childNodes末尾添加node
 * removeChild(node): 从childNodes里面删除node
 * replaceChild(newNode,oldNode):将childNodes中的oldNode替换成newNode
 * insertBefore(newNode,refNode): 在childNodes中的refNode之前插入newnode
 * */
window.onload = function(){
    var p1 = document.getElementById('p1');
    var span1 = document.getElementById('span1');
    //alert(p1.ownerDocument);   //[object HTMLDocument]
    //alert(span1.ownerDocument);//[object HTMLDocument]    
}

/*属性节点：
 * attributes: 属性节点列表(遍历某元素的属性节点)
 * 即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。
 * Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
 *   getNamedItem(name): 返回nodeName属性值是name的节点
 *   removeNamedItem(name): 删除nodeName属性值是name的节点
 *   setNamedItem(node): 将node添加到列表，按其nodeName属性进行索引
 *   item(pos): 像NodeList一样，返回在位置pos的节点  
 * */
window.onload = function(){
    var p1 = document.getElementById('p1');
    var list = p1.attributes;  //属性节点列表
    for(var i=0; i<list.length; i++){
        //alert(list[i].nodeName);  //id class name
    }
    //alert(list.getNamedItem("id")); //获取属性名是id的Attr对象(Attr对象属性有：nodeType,nodeName,nodeValue)
    
    list.removeNamedItem('name'); //移除name属性
    for(var i=0; i<list.length; i++){
        //alert(list[i].nodeName);  //id class
    }
}
      
    
</script>
</head>

<body>
<p id="p1" class="p1" name="p1"></p>
<p id="p2">
    <span id="span1">文本节点！</span>
</p>
</body>
</html>
